<template>
  <div class="box">
    <el-table
      ref="multipleTable"
      :data="arr"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="书籍名称" width="120">
        <template slot-scope="scope">{{ scope.row.bookName }}</template>
      </el-table-column>
      <el-table-column label="出版日期" width="120">
        <template slot-scope="scope">{{ scope.row.createDate }}</template>
      </el-table-column>
      <el-table-column label="价格" width="100">
        <template slot-scope="scope">{{ scope.row.price }}</template>
      </el-table-column>
      <el-table-column prop="num" label="数量" width="00">
        <template slot-scope="scope"
          ><el-button
            @click="scope.row.num--"
            size="mini"
            icon="el-icon-minus"
            circle
          ></el-button>
          {{ scope.row.num }}
          <el-button
            @click="scope.row.num++"
            size="mini"
            icon="el-icon-plus"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      arr: [
        {
          bookName: "算法导论",
          createDate: "2006-9",
          price: 85,
          num: 1,
          isChecked: false,
        },
        {
          bookName: "算法导论",
          createDate: "2006-9",
          price: 59,
          num: 1,
          isChecked: false,
        },
        {
          bookName: "算法导论",
          createDate: "2006-9",
          price: 35,
          num: 1,
          isChecked: false,
        },
        {
          bookName: "算法导论",
          createDate: "2006-9",
          price: 129,
          num: 1,
          isChecked: false,
        },
      ],
      multipleSelection: [],
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang = "less" scoped>
.box {
  margin: 0 300px;
}
</style>